<!DOCTYPE HTML>
<link rel="stylesheet" href="http://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--
	Future Imperfect by HTML5 UP
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
    <title>三3三博客社区</title>
    <link rel="icon" href="../images/icon.jpg" sizes="32x32">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!--[if lte IE 8]>
    <script src="../assets/js/ie/html5shiv.js"></script><![endif]-->
    <link rel="stylesheet" href="../assets/css/main.css"/>
    <!--[if lte IE 9]>
    <link rel="stylesheet" href="../assets/css/ie9.css"/><![endif]-->
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="../assets/css/ie8.css"/><![endif]-->
    <link rel="stylesheet" href="../templates/imgs/font-icon/iconfont.css">
    <link rel="stylesheet" href="../templates/css/demo.css">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=klz65vk0y73Q09NKmiiOhqwGmIAsLiVl"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
        #pop {
			display: none;
			overflow: auto;
        }
        #pop2 {
            display: none;
            overflow: auto;
        }
        #pop3 {
            display: none;
            overflow: auto;
        }
        .fontColor{
            color: red;
        }
        .header .icon2 {
            display: inline-block;
            font-size: 26px;
            color: #fff;
        }
    </style>
</head>
<body>

<!-- Wrapper -->
<div class="header">
    <div class="icon-box">
        <i id="pullDown" class="iconfont icon">&#xe637;</i>
    </div>
    <div>
        <i id="noReadWarning" style="position: relative;left: 1170px;font-weight: bold;font-size: 20px"><font color="red"></font></i>
    </div>
</div>
<div class="chatbar">
    <div class="chatbar-box">
        <div class="chatbar-contacts">
            <div class="contacts-search-box">
                <i class="iconfont">&#xe651;</i>
<!--                <span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>-->
                <input type="text" class="search-text" placeholder="请输入要搜索的联系人">
            </div>
            <ul class="chatbar-contacts-uls">
                <!-- <li>
                    <i class="iconfont">&#xe752;</i>
                    <p>黄小小</p>
                </li> -->
            </ul>
        </div>
        <div class="chatbar-messages">
            <div class="messages-title">
                <i class="iconfont">&#xe752;</i>
                <h4>黄小</h4>
                <i class="iconfont return-icon">&#xe61a;</i>
            </div>
            <div class="messages-text" id="messages-text">
                 <!--<ul class="messages-text-uls">
                    <li class="messages-text-lis">
                        <h4><i></i><span>黄小小</span><span class="time">2017/2/23 13:56</span></h4>
                        <p>您好！请问您是谁？我和你认识吗？你是哪里人?</p>
                    </li>
                </ul>-->
            </div>
            <div class="messages-box">
                <textarea class="messages-content" name="" id="messageT" cols="30" rows="10"></textarea>
                <input class="message-btn" type="button" value="发送" id="message-btn">
                <input class="video-btn" type="button" value="视频通话" id="video-btn">
            </div>
        </div>
    </div>
</div>

<div id="wrapper">

    <!-- Header -->
    <header id="header">
        <h1><a href="#">333，博客社区</a></h1>
        <nav class="links">
            <ul>
                <li><a onclick="openDialog4()">网站声明</a></li>
<!--                <li><a href="#">网友投稿</a></li>-->
                <li><a href="/templates/blog/board.html">意见社区</a></li>
                <li><a onclick="openDialog3()">广告位招租</a></li>
                <li><a onclick="openDialog()">皇室成员密室</a></li>
                <li><a onclick="openDialog2()" >浪涛和春霞</a></li>
                <li><a style="position: relative;left: 50px" id="weather"></a></li>
                <li style="position: relative;left: 150px;" id="userName"><a></a></li>
            </ul>



            <div id="pop2">
                <div class="ui-dialog ui-dialog-operate show">
                    <div class="ui-dialog-cnt">
                        <!--									<div class="ui-dialog-hd">-->
                        <!--										<div class="ui-img">-->
                        <!--											<span style="background-image:url(http://placeholder.qiniudn.com/640x300)"></span>-->
                        <!--										</div>-->
                        <!--									</div>-->
                        <div class="ui-dialog-bd">
                            <input type="text" id="pwd" placeholder="请输入密码">
                        </div>
                        <div class="ui-dialog-ft">
                            <button type="button" data-role="button" class="ui-btn" onclick="jump2()">确定</button>
                        </div>
                        <i class="ui-dialog-close" onclick="closeDialog2()" data-role="button"></i>
                    </div>
                </div>
            </div>

            <div id="pop3">
                <div class="ui-dialog ui-dialog-operate show">
                    <div class="ui-dialog-cnt">
                        <div class="ui-dialog-ft">
                            <h3>请进入博客，在留言板上留下联系方式,站主会主动联系您</h3>
                        </div>
                        <i class="ui-dialog-close" onclick="closeDialog3()" data-role="button"></i>
                    </div>
                </div>
            </div>

            <div id="pop4">
                <div class="ui-dialog ui-dialog-operate show">
                    <div class="ui-dialog-cnt">
                        <div class="ui-dialog-ft">
                            <h3>本站定位为IT技术博客站，博客内容主要涉及编程语言、前端开发、服务端开发及一些热门技术等方面，同时分享实用的开发资料。</h3>
                        </div>
                        <i class="ui-dialog-close" onclick="closeDialog4()" data-role="button"></i>
                    </div>
                </div>
            </div>

			<div id="pop">
                <div class="ui-dialog ui-dialog-operate show">
                    <div class="ui-dialog-cnt">
                        <!--									<div class="ui-dialog-hd">-->
                        <!--										<div class="ui-img">-->
                        <!--											<span style="background-image:url(http://placeholder.qiniudn.com/640x300)"></span>-->
                        <!--										</div>-->
                        <!--									</div>-->
                        <div class="ui-dialog-bd">
                            <input type="text" id="password" placeholder="请输入密码">
                        </div>
                        <div class="ui-dialog-ft">
                            <button type="button" data-role="button" class="ui-btn" onclick="jump()">确定</button>
                            <button type="button" data-role="button" class="ui-btn" onclick="hint()">申请加入</button>
                        </div>
                        <i class="ui-dialog-close" onclick="closeDialog()" data-role="button"></i>
                    </div>
                </div>
			</div>
        </nav>
        <nav class="main">
            <ul>
                <li class="search">
                    <a class="fa-search" href="#search">Search</a>
                    <form id="search" method="get" action="#">
                        <input type="text" name="query" placeholder="Search"/>
                    </form>
                </li>
                <li class="menu">
                    <a class="fa-bars" href="#menu">Menu</a>
                </li>
            </ul>
        </nav>
    </header>

    <!-- Menu -->
    <section id="menu">

        <!-- Search -->
        <section>
            <form class="search" method="get" action="#">
                <input type="text" name="query" placeholder="Search"/>
            </form>
        </section>

        <section>
            <select id="from" style="width: 100px">
                <option value ="zh" selected="selected">中文</option>
                <option value ="en">英语</option>
                <option value="jp">日语</option>
                <option value="spa">西班牙语</option>
                <option value="ru">俄语</option>
                <option value="it">意大利语</option>
                <option value="de">德语</option>
                <option value="fra">法语</option>
                <option value="kor">韩语</option>
                <option value="pt">葡萄牙语</option>
                <option value="vie">越南语</option>
                <option value="ara">阿拉伯语</option>
            </select>
            <input id="tranMsg" style="position: relative;top: -44px;left: 110px;width: 200px" type="text" >
            <font style="height: 40px;position: relative;top: -20px">翻译成：</font>
            <select id="type" style="width: 100px">
                <option value ="zh" >中文</option>
                <option value ="en" selected="selected">英语</option>
                <option value="jp">日语</option>
                <option value="spa">西班牙语</option>
                <option value="ru">俄语</option>
                <option value="it">意大利语</option>
                <option value="de">德语</option>
                <option value="fra">法语</option>
                <option value="kor">韩语</option>
                <option value="pt">葡萄牙语</option>
                <option value="vie">越南语</option>
                <option value="ara">阿拉伯语</option>
            </select>
            <input id="msg" style="position: relative;top: -44px;left: 110px;width: 200px" type="text" >

            <a class="button big fit" onclick="translateMSG()">翻译</a>
        </section>

        <section>
            <ul class="actions vertical">
                <li><a href="/recreation/music/index.html" target="_blank" class="button big fit" >听音乐</a></li>
            </ul>
        </section>

        <section>
            <ul class="actions vertical">
                <li><a href="/approval/findWithDown" target="_blank" class="button big fit" >我的待办</a></li>
            </ul>
        </section>

        <section>
            <ul class="actions vertical">
                <li><a href="#" class="button big fit" onclick="logout()">退出</a></li>
            </ul>
        </section>
    </section>

    <!-- Main -->
    <div id="main">

        <!-- Post -->
        <article class="post">
            <header>
                <div class="title">
                    <h2><a th:href="@{/api/user/login}">博客空间</a></h2>
                    <p>一个人真正的幸福不是待在光明之中，而是从远处凝望光明，朝它奔去，就在那拼命忘我的时间里，才有人生真正的充实</p>
                </div>
                <div class="meta">
                    <time class="published" datetime="2020-07-23">July 23, 2020</time>
                    <a href="#" class="author"><span class="name">三3三</span><img src="../images/pic09.jpg"
                                                                                      alt=""/></a>
                </div>
            </header>
            <a href="#" class="image featured"><img src="../images/pic03.jpg" alt=""/></a>
            <p>java菜鸟，代号333</p>
            <footer>
                <ul class="actions">
                    <li><a href="/blog/list" class="button big">进入博客</a></li>
<!--                    <a href="https://www.333blog.top/templates/chat/vedio3.html" target="_blank" class="button big">视频聊天</a>-->
                </ul>
                <ul class="stats">
<!--                    <li><a href="#">评论</a></li>-->
                    <li><a onclick="clickLike()" class="icon fa-heart" id="likeCount">0</a></li>
                    <li><a href="blog/board.html" class="icon fa-comment" id="blogRemarkCount">0</a></li>
                </ul>
            </footer>
        </article>

        <article class="post">
            <header>
                <div class="title">
                    <h2><a href="#">娱乐休闲</a></h2>
                    <p>我们的心智需要松弛，倘若不进行一些娱乐活动，精神就会垮掉</p>
                </div>
                <div class="meta">
                    <time class="published" datetime="2015-10-25">October 26, 2020</time>
                    <a href="#" class="author"><span class="name">三3三</span><img src="../images/pic09.jpg" alt="" /></a>
                </div>
            </header>
            <a href="#" class="image featured"><img src="../images/pic02.jpg" alt="" /></a>
            <p>java菜鸟，代号333</p>
            <footer>
                <ul class="actions">
                    <li><a href="/recreation/home/index.html" class="button big">进入娱乐天地</a></li>
                </ul>
                <ul class="stats">
                    <li><a href="blog/board.html">有好的娱乐建议欢迎在留言板留言</a></li>
                    <li><a href="blog/board.html" class="icon fa-comment" id="blogRemarkCount2">0</a></li>
                </ul>
            </footer>
        </article>

        <article class="post">
            <header>
                <div class="title">
                    <h2><a href="#">新闻资讯模块</a></h2>
                    <p>掌握一手时讯新闻</p>
                </div>
                <div class="meta">
                    <time class="published" datetime="2015-10-25">November 26, 2020</time>
                    <a href="#" class="author"><span class="name">三3三</span><img src="../images/pic09.jpg" alt="" /></a>
                </div>
            </header>
            <a href="#" class="image featured"><img src="../images/pic01.jpg" alt="" /></a>
            <p>java菜鸟，代号333</p>
            <footer>
                <ul class="actions">
                    <li><a href="/news/index.html" target="_blank" class="button big">进入新闻资讯模块</a></li>
                </ul>
                <ul class="stats">
                    <li><a href="blog/board.html">有好的技术点欢迎在留言板留言</a></li>
                    <li><a href="blog/board.html" class="icon fa-comment" id="blogRemarkCount3">0</a></li>
                </ul>
            </footer>
        </article>

    </div>

    <!-- Sidebar -->
    <section id="sidebar">

        <!-- Intro -->
        <section id="intro">
            <a href="#" class="logo"><img src="../images/logo.jpg" alt=""/></a>
            <header>
                <h2>nice meeting you</h2>
                <p>Another fine responsive site template by <a href="http://html5up.net">HTML5 UP</a></p>
            </header>
        </section>

        <!-- Mini Posts -->
        <section>
            <div class="mini-posts">

                <!-- Mini Post -->
                <article class="mini-post">
                    <header>
                        <h2><a href="map/readerMap.html">在线读者 全国分布图</a></h2>
                        <time class="published" datetime="2015-10-20" id="dateTime"></time>
                        <a href="map/readerMap.html" class="author"><img src="../images/pic08.jpg" alt=""/></a>
                    </header>
                    <a href="map/readerMap.html" class="image"><img src="../images/map.png" alt=""/></a>
                </article>

            </div>
        </section>

        <!-- Posts List -->
        <section>
            <ul class="posts">
                <li>
                    <article>
                        <header>
                            <h2><a href="map/read_info.html">博客访问情况统计图</a></h2>
                        </header>
                        <a href="map/read_info.html" class="image"><img src="../images/pic07.jpg" alt=""/></a>
                    </article>
                </li>
            </ul>
        </section>

        <!-- About -->
        <section class="blurb">
            <h1>在线聊天室<b id="onlineNum" style="position: relative;left: 40px"></b></h1>
            <ul class="actions">
                 <a onclick="enterTalk()" class="image featured" ><img src="../images/pic06.jpg" ></a>
                <li><a onclick="enterTalk()" class="button">进入小黑屋</a></li>
            </ul>
        </section>

        <!-- About -->
<!--        <section class="blurb">-->
<!--            <h1>影视大全</h1>-->
<!--            <ul class="actions">-->
<!--                <a onclick="enterTalk()" class="image featured" ><img src="../images/pic05.jpg" ></a>-->
<!--                <li><a onclick="enterTalk()" class="button">进入影视基地</a></li>-->
<!--            </ul>-->
<!--        </section>-->

        <!-- Footer -->
        <section id="footer">
            <ul class="icons">
                <li><a href="#" class="fa-twitter"><span class="label">Twitter</span></a></li>
                <li><a href="#" class="fa-facebook"><span class="label">Facebook</span></a></li>
                <li><a href="#" class="fa-instagram"><span class="label">Instagram</span></a></li>
                <li><a href="#" class="fa-rss"><span class="label">RSS</span></a></li>
                <li><a href="#" class="fa-envelope"><span class="label">Email</span></a></li>
            </ul>
            <p class="copyright">&copy; Untitled. Design: <a rel="nofollow" href="http://html5up.net">HTML5 UP</a>.
                Images: <a rel="nofollow" href="http://unsplash.com">Unsplash</a>.</p>
        </section>

    </section>

</div>

<!-- Scripts -->
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/skel.min.js"></script>
<script src="../assets/js/util.js"></script>
<!--[if lte IE 8]>
<script src="../assets/js/ie/respond.min.js"></script><![endif]-->
<script src="../assets/js/main.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/demo.js"></script>
<script src="webtrc.js"></script>

</body>
<script type="text/javascript">
    var name;
    $(function () {
        closeDialog4();
        getLikeCount();
        noReadCount();
        getOnlineNum();
        $.getJSON("/remark/getBlogRemarkCount",function (data) {
            // document.getElementById("").val(data.data);
            $("#blogRemarkCount").text(data.data)
            $("#blogRemarkCount2").text(data.data)
            $("#blogRemarkCount3").text(data.data)
        })

        $.getJSON("/api/user/findUserInfo",function(data){
            name = data.name;
            userId = data.id;
            var str = "<font color='#1e90ff'> 欢迎："+name+" !!!<font>"
            $("#userName").append(str)
        })
        // alert("嘿！小子，就是你攻击我的博客？看留言板！你个嘚儿嘚儿~~~")
    })

    function openDialog() {
        document.getElementById('pop').style.display = 'block';
    }

    function closeDialog() {
        document.getElementById('pop').style.display = 'none';
    }

    function openDialog2() {
        document.getElementById('pop2').style.display = 'block';
    }

    function closeDialog2() {
        document.getElementById('pop2').style.display = 'none';
    }

    function openDialog3() {
        document.getElementById('pop3').style.display = 'block';
    }

    function closeDialog3() {
        document.getElementById('pop3').style.display = 'none';
    }

    function closeDialog4() {
        document.getElementById('pop4').style.display = 'none';
    }

    function openDialog4() {
        document.getElementById('pop4').style.display = 'block';
    }




    function jump() {
		var password = $("#password").val();
		if(password=="" || password == null){
			alert("密码不能为空！");
			return;
		}
		$.ajax({
			type: 'POST',
            timeout: 500,
			url:"/api/user/verify",
			data:"{\"password\":"+password+"}",
			contentType: "application/json",
			dateType: "json",
			success: function (data) {
                if (data.code == 200){
                    window.location.href = "/templates" + data.data
                }else {
                    alert(data.data)
                }
			}
				}
		)
    }


    function jump2() {
        var password = $("#pwd").val();
        if(password=="" || password == null){
            alert("密码不能为空！");
            return;
        }
        $.ajax({
                type: 'POST',
                url:"/api/user/adytum",
                data:"{\"password\":"+password+"}",
                contentType: "application/json",
                dateType: "json",
                success: function (data) {
                    if (data.code == 200){
                        window.location.href = "/templates" + data.data
                    }else {
                        alert(data.data)
                    }
                }
            }
        )
    }

    function logout() {
        $.ajax({
                type: 'POST',
                url:"/api/user/logout",
                contentType: "application/json",
                // data:{"password":""},
                success: function (data) {
                    if (data.code == 200){
                        window.location.href = data.data
                    }else {
                        alert(data.data)
                    }
                }
            }
        )
    }

    //获取未读消息数
    function noReadCount() {
        $("#noReadWarning").empty();
        $.ajax({
                type: 'POST',
                url:"/chat/noReadCount",
                contentType: "application/json",
                success: function (data) {
                    var noReadCount = data.data;
                    if (data.code == 200){
                        if (noReadCount == 1){
                            return;
                        }
                        $("#noReadWarning").append(
                            '<font color="red">' + noReadCount + '</font>'
                        );
                    }else {
                        alert(data.data)
                    }
                }
            }
        )
    }

    //获取聊天室在线人数
    function getOnlineNum() {
        $("#onlineNum").empty();
        $.ajax({
                type: 'POST',
                url:"/chat/getOnlineNum",
                contentType: "application/json",
                success: function (data) {
                    var onlineNum = data.data;
                    if (data.code == 200){
                        $("#onlineNum").append(
                            '<font color="green">当前在线人数：' + onlineNum + '</font>'
                        );
                    }
                }
            }
        )
    }

    function hint() {
        alert("已经向站主申请，请耐心等待！")
    }

    function getLikeCount() {
        var data = {
            bId:0,
            time:new Date().getTime()
        }
        $.ajaxSettings.async = false;//取消异步(如果不设置此参数，前后端数据会出现不同步现象)
        $.getJSON("/like/count",data,function (data) {
            if (data.code == 200){
                $("#likeCount").text(data.data.count);
                if (data.data.isLike == 1){
                    $("#likeCount").addClass("fontColor")
                }
            }else {
                // alert(data.message)
            }
        })
    }

    function clickLike() {
        var data = {
            bId:0
        }
        $.getJSON("/like/clickLike",data,function (data) {
            if (data.data.isLike == 0){
                $("#likeCount").removeClass("fontColor")
            }else{
                $("#likeCount").addClass("fontColor")
            }
        })
        getLikeCount();
    }


    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }

    //实时时间版块
    Date.prototype.format = function (fmt) {
        var o = {
            "y+": this.getFullYear, //年
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds() //秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
    setInterval("document.getElementById('dateTime').innerHTML = '<font color=\"#ff7f50\" size=\"4px\">' + (new Date()).format('yyyy-MM-dd hh:mm:ss') + '</font>'", 1000);

    function enterTalk() {
        let url = "chat/chat.html?name="+name;
        window.open(url)
    }

    //天气预报版块
    //百度api 通过ip定位
    var myCity = new BMap.LocalCity();
    myCity.get(myFun);
    var lat;//纬度
    var lng;//经度
    function myFun(result) {
        var cityName = result.name;
        $("#position").append(cityName);
        lat = result.center.lat;
        lng = result.center.lng;
        // alert("IP 定位城市:" + cityName+"   经度"+result.center.lng+"   纬度"+result.center.lat);
        $.ajax({
            type:"get",//这里的请求方式与前面所说的请求方式一样
            // url:'https://ali-weather.showapi.com/gps-to-weather?from=5&lat='+lat+'&lng='+lng+'&need3HourForcast=0&needAlarm=0&needHourData=0&needIndex=0&needMoreDay=0',//url就是api请求接口
            beforeSend:function(request){	//向接口发送身份认证
                request.setRequestHeader("Authorization","APPCODE "+"ee49f89bc46242a09395e5c4681a665c");//注意这里APPCODE后面有一个空格，不能删掉
            },
            dataType:"json",//请求返回数据格式
            success: function (data) {
                console.log(data);
                var city = data.showapi_res_body.cityInfo.c5;
                var temperature = data.showapi_res_body.now.temperature;
                var weather = data.showapi_res_body.now.weather;
                var weatherPic = data.showapi_res_body.now.weather_pic;
                var windPower = data.showapi_res_body.now.wind_power;
                document.getElementById("weather").setAttribute('title',weather)
                $("#weather").append('<img style="width: 30px;position:relative;top:7px" title = '+ weather +' src ='+ weatherPic +'> '+city+': '+temperature+'℃ 风力：'+windPower)
            },
            error:function(e){
                console.log(e.message);
            }
        })
    }

    //翻译
    function translateMSG(){
        var from = $("#from").val();
        var type = $("#type").val();
        var msg = $("#tranMsg").val();
        $.ajax({
            type: 'POST',
            url:"/misc/translate",
            data: {"from":from,"type":type,"msg":msg},
            success: function (data) {
                if (data.code == 200){
                    $("#msg").val(data.data)
                }
            },
            error: function (data) {
                alert("系统繁忙，请稍后再试！")
            }
        })
    }

</script>
</html>
